<style>
#app{display: table;width:100%;}
body{background: #fff;}

.entrustrecord.login_content{    width: 1200px;margin:0 auto;
    height: 99.8vh;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/

    /*justify-content: center;*/
}

.entrustrecord .el-input__inner{height:40px;}
.entrustrecord .el-table td{padding:12px 0;}
.entrustrecord .el-form--inline .el-form-item{margin-bottom: 0;}
.entrustrecord .list_content{margin-bottom: 30px;}
.entrustrecord .alt_item{border-top: 1px solid #dcdcdc;width: 100%;}
.entrustrecord .alt_title{
	    font-size: 16px;
    color: #333;
    height: 40px;
    line-height: 40px;
}

.entrustrecord .el-table th{text-align: left;}
.entrustrecord .el-table{border:1px solid #ebeef5;margin-top: 10px;}
/*.entrustrecord .el-table thead tr th{background: #f5f5f5;}*/
.entrustrecord .el-dialog__wrapper{
	display: flex;
	align-items: center;
}
.entrustrecord .el-dialog{width:434px;}
.entrustrecord .dialog_alt{
	    margin-left: 130px;
    /*margin-top: 20px;*/
    /*margin-bottom: 5px;*/
    font-size: 12px;
    color: #f56c6c;
}
.entrustrecord .form_part .el-input{width:314px;}
.entrustrecord .form_part .el-input__inner{height:36px;}
.entrustrecord .el-dialog__body{padding-top:10px;}
.entrustrecord .btn_add .el-form-item__content{max-width: 324px;}
.entrustrecord .coinsList{
	    margin: 0 auto;
    width: 1200px;
    margin-top: 14px;
    margin-bottom: 14px;
    display: flex;
    justify-content: flex-start;
    align-items: center; 
    flex-wrap: wrap;
}
.entrustrecord .coins_item{
	    width: 107px;
    height: 45px;
    border: 1px solid #ccc;
    margin-left: -1px;
    margin-top: -1px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center; 
}
.entrustrecord .coins_item_active,.entrustrecord .coins_item:hover{
	    background: #37a6f3;
}
.entrustrecord .coins_item img{
	    width: 20px;
    height: 20px;
    margin-right: 5px;
}
.entrustrecord  .add_addr{
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 150px;
    height: 50px;
    cursor: pointer;
    background: url(../assets/img/add-addr-bg.png);
    background-size: 100% 100%
}

</style>
<template>
  <div class="entrustrecord">  
      
	<template v-if="routerPath=='withdrawalsrecord'" >

      <div class="login_content entrustrecord">  
      		<div class="usercenter_all">
      			<div class="identity_header">      			
	      			<el-breadcrumb separator="/" class="bread" id="mybread">
				        <el-breadcrumb-item v-for="(item,index) in breadcrumbs" :key="index" :to="item">
				          {{ item.meta.name || item.name }}
				        </el-breadcrumb-item>
				      </el-breadcrumb>
	      		</div>
  				
  			</div>   
      		<div class="usercenter_all">
      			<div class="coinsList">
  					<el-form  :inline="true" :model="filters">
			            <el-form-item class="table_input">
			               <el-select v-model="filters.marketId" placeholder="全部市场">
							    <el-option
							      v-for="item in marketList"
							      :key="item.value"
							      :label="item.label"
							      :value="item.value">
							    </el-option>
							  </el-select>
			            </el-form-item>
			          
		          	</el-form>
      			</div>
      		</div>
       		<div class="usercenter_all">
       		
		    	<el-table  :data="recordList"   style="width: 100%" :ref="recordList" >
				    <el-table-column   prop="createTime"  label="时间" sortable >
				    </el-table-column>
				    <el-table-column   prop="coinTitle" label="币种">
				    </el-table-column>				   
				  	<el-table-column   prop="address" label="地址" width="370">
				    </el-table-column>	
				    <el-table-column   prop="amount" label="数量" sortable>
				    </el-table-column>	
				    <el-table-column   prop="fee" label="转入手续费">
				    </el-table-column>	
				    <el-table-column   prop="realAmount" label="实际转入" sortable>
				    </el-table-column>	
				    <el-table-column   prop="status" label="状态" :formatter="formatSex">
				    </el-table-column>	
				   <!--  <el-table-column label="操作">
			            <template slot-scope="scope">					       
			              <span class="span_btn"  @click="handleDeal(scope.$index, scope.row)" >撤单</span>	           
			             
			            </template>
		            </el-table-column> -->
			    </el-table>
			  		<!--工具条-->
			    <el-col :span="24" class="toolbar toolbar_footer">			     
			      <el-pagination  layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange" :page-size="showCount" :total="total" style="float:right;">
			      </el-pagination>
			    </el-col>
					  
       		</div>

      </div>
      
        
    </template>
    <template v-else>
        <router-view></router-view>
    </template>
    
    
   
  </div>
</template>

<script>
import * as users from '../api/users';
import * as trademark from '../api/trademark';
import * as coinwallet from '../api/coinwallet';
import Vue from 'vue'



var code ; //在全局定义验证码
export default {

  components:{
  },
  computed: {   
 	activeMenu: function(){
      // return this.$route.name
      return this.$route.path
    },
    breadcrumbs: function(){
      return (this.$route && this.$route.matched) || []
    }
  },
  data() {
    return {
    	marketList:[{label:'全部',value:'0'}],
    
    	recordList:[],
    	isRecharge:true,
    	rechargeList:[],
    	withdrawList:[],
    	expands:[],
    	filters:{},
    	userId:'',
    	list:[{name:'btc',cid:'1'},{name:'btc',cid:'2'}],
    	showCount:20,
		total:0,
      	page: 1,
		onOff:true,
      	loginFormRules:{
        userName: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
      },
      picLyanzhengma:'',
      checkCode:'',
      loginForm:{region:'china'},
      username: '',
      password: '',
      isBtnLoading: false,
      routerPath:'',
      isRealName:false,
      userInfo:'',
      showCount:20,
	  total:20,
	  page:1,
    };
  },
 
  methods: {
     //状态转换
    formatSex: function (row, column) {
      return row.status == 30 ? '待审核' : row.status == 31 ? '拒绝' :row.status == 32 ? '完成' :row.status == 40 ? '未付款' :row.status == 41 ? '到账成功' : row.status == 42 ? '人工到账' : '处理中';
    },
  	handleCurrentChange(val) {
      this.page = val;
      // this.getUsers();
      this.fetchData();
    },
  	handleAdd:function(){
  		this.addFormVisible=true;

  	},

  	toggleStatus(){
  		console.log(this.onOff)
  	},
 
    fetchDataUser(){
    	//获取用户信息
    	let para={
    		userId:this.userId,
    	}
	  	users.info.r(para).then((res) => {
	  		console.log(res)
	  		if(res.data.retCode==1){
	  			if(res.data.data.realName){
  					this.isRealName=true;
  				}else{
  					this.isRealName=false;
  				}
  				this.userInfo=res.data.data;
  				sessionStorage.setItem("localUser",JSON.stringify(res.data.data))
	  		}else{
	  			this.$message.error(res.data.retMsg);
	  		}
	       
	       

	      });
    },
   	fetchData(init) {
      this.loading = true;
     /* if(!this.$_has([entrustmanage.request])){
        this.$message("暂无权限");
        this.loading = false;

        return;
      }*/
      let para = {
          // groupId:this.groupId,
          showCount:this.showCount,
          currentPage:this.page,//当前查询页
          // marketId:this.filters.marketId,
          userId:this.filters.userId,
        
        };

      coinwallet.requestWithdrawList.r(para).then((res) => {
        console.log(res)
        if(res.data.retCode==1){
          if(res.data.data){
            this.total=parseInt(res.data.data.totalRow);
            this.recordList = res.data.data.list;
          }else{
            // this.list=[];
          }
            
        }else{
           this.$message({
              message: res.retMsg,
              type: 'error'
            });
        }
      
      
        this.loading = false;
      });
    },
    fetchDataMarket() {
    
      trademark.request.r().then((res) => {
      	console.log(res);
      	if(res.data.retCode==1){
        	// this.marketList = res.data.data.list;
        	if(res.data.data.list){
        		res.data.data.list.map(x=>{
        			this.marketList.push({label:x.title,value:x.marketId})
        		})
        	}
      	}else{
      		this.$message.error(res.data.retMsg);
      	}       
     

      });
    },
 
	handleDeal(index,row){

	},

  },
	watch: {
      // 如果路由有变化，会再次执行该方法
      "$route": function(){
        this.routerPath=this.$route.path.split("/").pop();
        // this.fetchDataUser()

      }
  },
  created() {
    this.routerPath=this.$route.path.split("/").pop();
    this.userId=sessionStorage.getItem('userId')
    this.fetchData();
    // this.fetchDataUser();
    this.fetchDataMarket();
    // sessionStorage.setItem('userId','152420221979644577')
  }
};
</script>
